import { PageHeaderWrapper } from '@ant-design/pro-layout';
import React, { useRef, useState } from 'react';

import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import type { TableListItem } from './data';
import moment from 'moment';
import { request } from 'umi';

const handleDateTime = (time: any) => {
  const flag = parseInt(
    moment()
      .startOf('day')
      .format('x'),
    10,
  );
  return new Date(time).valueOf() > flag
    ? moment(time).format('HH:mm:ss')
    : moment(time).format('YYYY年MM月DD日');
};

export interface MessageProps {
}

const Message: React.FC<MessageProps> = () => {
  const [ total, setTotal ] = useState(0);
  const columns: ProColumns<TableListItem>[] = [
    {
      // @ts-ignore
      dateIndex: 'id',
      hideInTable: true,
    },
    {
            dataIndex: 'received',
      width: 30,
      render: (_, record) =>
        record.received ? (
          ''
        ) : (
          <div
            style={ {
              borderRadius: '50%',
              height: '15px',
              width: '15px',
              marginLeft: '5px',
              backgroundColor: '#c72a29',
            } }
          />
        ),
    },
    {
      title: '通知内容',
            dataIndex: 'comment',
      render: (_, record) => (
        <div>
          车位{ record.subject } { record.comment }
        </div>
      ),
    },
    {
      title: '通知时间',
            dataIndex: 'createDate',
      render: (_, record) => <div>{ handleDateTime(record.createDate) }</div>,
    },
  ];
  const actionRef = useRef<ActionType>();
  return (
    <PageHeaderWrapper>
      <ProTable<TableListItem>
        headerTitle='通知列表'
        columns={ columns }
        actionRef={ actionRef }
        search={ false }
        pagination={ {
          defaultPageSize: 10,
          total,
        } }
        request={ async (params = {}) => {
          const { current: page, pageSize } = params;
          const res = await request('/notification/message/list', {
            params: {
              page,
              pageSize,
            },
          });
          if (res.code === 0) {
            setTotal(res.data.total);
            return Promise.resolve({ data: res.data.list });
          }
          return Promise.resolve({ data: [] });
        } }
      />
    </PageHeaderWrapper>
  );
};

export default Message;
